<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 60px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 改变 id 为 one 的元素的背景色为 #0000FF
            $("#b1").click(
                function () {
                    $("#one").css("background", "#0000FF");
                }
            )
            //2. 改变 class 为 mini 的所有元素的背景色为 #FF0033
            $("#b2").click(
                function () {
                    $(".mini").css("background", "#FF0033");
                }
            )
            //3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
            $("#b3").click(
                function () {
                    $("div").css("background", "#00FFFF");
                }
            )
            //4. 改变所有元素的背景色为 #00FF33
            $("#b4").click(
                function (){
                    $("*").css("background", "#00FF33");
                }
            )
            //5. 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF
            $("#b5").click(
                function (){
                    $("#two,.mini,span").css("background", " #3399FF");
                }
            )

        })
    </script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/>
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two">div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span  one</span>
<span id="s_two">span two</span>
</body>
</html>